<template>
  <div class="policyDiv" @click="$router.push({path: '/policy/policyDetail', query: {id: policy.id}})">
    <div class="policyNameDiv">
      <div class="policyName">
        <span
          v-for="(item,index) in formatSearchStr(policy.name)"
          :key="index"
          :style="item == wd ? 'color: #d00000' : ''"
        >{{item}}</span>
      </div>
    </div>
    <div class="policyDescription">
      <span
        v-for="(item,index) in formatSearchStr(policy.description)"
        :key="index"
        :style="item == wd ? 'color: #d00000' : ''"
      >{{item}}</span>
    </div>
    <div class="policyFooter">
      <div class="policyMsg">
        <div class="policyMsg_Class">
          <div class="no ellipsis">{{policy.no}}</div>
          <div style="margin-bottom:6px" class="publishUnit ellipsis">发文部门：{{policy.publishUnit}}</div>
        </div>
        <div class="policyMsg_Class">
          <div style="margin-right:14px;margin-bottom:6px;width:140px;">发文日期：{{policy.releaseTime}}</div>

          <div>{{'申报日期：' + policy.beginDate + '至' + policy.closingDate}}</div>
          <!-- <div>阅读浏览：{{policy.pv}}</div> -->
        </div>
        <div></div>
        <div></div>
        <!-- <span>{{'主管部门：' + policy.publishUnit}}</span> -->
      </div>
      <div style="display: flex;align-items: center;">
        <span class="policyApproachEnd" v-if="policy.approachEnd == 1">即将到期</span>
        <!-- <span class="policyApproachEnd">{{policy.approachEnd == 1 ? '即将到期' : ''}}</span> -->
        <Buttons :buttons="buttons" @toPolicyDetail="toPolicyDetail(policy)" @none="''"></Buttons>
      </div>
    </div>
  </div>
</template>

<script>
import { formatSendBtn } from '@/utils/util.js'

export default {
  name: 'policyFrameSearch',
  props: {
    policy: {
      type: Object,
    },
    wd: {
      type: String,
      default: null,
    },
  },
  computed:{
    buttons(){
      if(this.policy.applyStatus != 2){
        if(this.policy.status == 3){
          return [{text:"立即申报",type:"gray",size:"l",method:"none"}]
        } else if(this.policy.status == 2){
          return [{text:"立即申报",type:"weakSuccess",size:"l",method:"none"}]
        } else {
          return [{text:"立即申报",type:"success",size:"l",method:"toPolicyDetail"}]
        }
      } else {
        return [{text:"已申报",type:"weakSuccess",size:"l",method:"none"}]
      }
    }
  },
  methods: {
    /**
     * 按关键字将字符串分割为数组，以突出显示关键字
     */
    formatSearchStr: function (str) {
      let ns = this
      if (ns.wd == null) {
        return [str]
      }
      let arr = str.split(ns.wd)
      let arrTemp = []
      for (let i = 0; i < arr.length; i++) {
        arrTemp.push(arr[i])
        if (i < arr.length - 1) {
          arrTemp.push(ns.wd)
        }
      }
      return arrTemp
    },
    /**
     * 跳转到政策详情页面
     */
    toPolicyDetail: function (policy) {
      let ns = this
      if (!formatSendBtn(policy).canIn) {
        return
      }
      ns.$router.push({ path: 'policyDetail', query: { id: policy.id } })
    },
    /**
     * 格式化显示按钮颜色
     */
    formatBtn: function (policy) {
      return formatSendBtn(policy)
    },
  },
}
</script>

<style scoped>
.policyDiv {
  position: relative;
  text-align: left;
  padding: 20px;
  margin-bottom: 20px;
}
.no {
  font-size: 13px;
  color: #999999;
  margin-bottom: 7px;
  margin-right: 14px;
  width: 140px;
}
.publishUnit{
  width: 190px;
}
.policyDiv:hover {
  box-shadow: 0px 0px 10px #888888;
  transition: all 0.2s ease 0s;
  cursor: pointer;
}

.policyDiv .policyNameDiv {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.policyDiv .policyApproachEnd {
  background-color: #f33f2b;
  color: #fff;
  font-size: 13px;
  padding: 4px 6px;
  /* position: absolute; */
  /* top: 10px; */
  /* right: 40px; */
  /* width: 100px; */
  flex-shrink: 0;
  text-align: right;
  margin-right: 10px;
}

.policyDiv:hover .policyNameDiv .policyName {
  color: #045db9;
  transition: all 0.2s ease 0s;
}

.policyDiv .policyNameDiv .policyName {
  font-size: 20px;
  font-weight: bold;
  /* display: flex;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden; */
  white-space:normal;
  word-break:break-all;
}

.policyDiv .policyNameDiv .policyName:hover {
  cursor: pointer;
}

.policyDiv .policyDescription {
  white-space: pre-wrap;
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.policyDiv .policyFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.policyDiv .policyFooter .policyMsg {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999999;
  flex-wrap: wrap;
}
.policyDiv .policyFooter .policyMsg .policyMsg_Class {
  display: flex;
  /* width: 350px; */
  justify-content: space-between;
}
.policyDiv .policyFooter .declareBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #045db9;
  color: #f1f2f4;
  width: 120px;
  height: 40px;
  border-radius: 5px;
}

.policyDiv .policyFooter .declareBtn:hover {
  background-color: #045db9;
  color: #f1f2f4;
  transition: all 0.2s ease 0s;
  cursor: pointer;
}

.policyDiv .policyFooter .cantDeclareBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f2f4;
  color: #999999;
  width: 120px;
  height: 40px;
  border-radius: 5px;
}

.policyDiv .policyFooter .cantDeclareBtn:hover {
  cursor: pointer;
}
</style>
